<template>
  <c-form-dialog
    ref="form"
    :form-data="formData"
    :form-items="formItems"
    :table-id="tableId"
    :table-name="tableName"
    :visible.sync="innerVisible"
    :before-save="handleBeforeSave"
    @dismiss="handleDismiss"
    @success="handleSuccess"
  ></c-form-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import SelectRepayPlan from '@/credit/views/city/self/after/repay/SelectRepayPlan'
import { sub, add } from '@vimi/utils-tool'
export default {
  components: {},
  props: {
    visible: Boolean,
    queryId: String,
    tableId: String,
    formData: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    const isNumberValidator = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!Number.isFinite(+value)) {
        callback(new Error('请输入正确的数值'))
      } else if (+value > +this.maxFunds) {
        callback(new Error('不能大于还款计划剩余应还金额'))
      } else {
        callback()
      }
    }
    return {
      funds: 0,
      maxFunds: 0,
      innerVisible: false,
      productName: '',

      formItems: [
        {
          tag: SelectRepayPlan,
          itemAttrs: {
            label: '还款计划(用于终止短信提示)',
            rules: [{ required: true, message: '请选择对应还款计划', trigger: 'change' }],
          },
          attrs: {
            class: 'form-control-ml',
            key: 'datum_repay_list_id',
            value: '',
            placeholder: '请选择对应还款计划',
          },
          events: {
            select: (model, select) => {
              model.repay_time = select?.pay_time ?? null
              this.maxFunds = sub(select.capital, select.repay_funds_total)
              model.repay_funds = sub(select.capital, select.repay_funds_total)
            },
            getFunds: (model, funds) => {
              this.maxFunds = add(funds, this.funds) // 控制输入最大值时应当删除当前数据的金额
            },
          },
        },
        {
          tag: 'date',
          itemAttrs: {
            label: '还款日期',
            rules: [{ required: true, message: '请选择还款日期', trigger: 'change' }],
          },
          attrs: { key: 'repay_time', value: '', placeholder: '请选择还款日期' },
        },

        {
          tag: 'input',
          itemAttrs: {
            label: '还款金额(本金)',
            rules: [
              { required: true, message: '请填写还款金额(本金)', trigger: 'blur' },
              { validator: isNumberValidator, trigger: 'blur' },
            ],
          },
          attrs: { key: 'repay_funds', value: '' },
          tagSlots: [{ name: 'append', slot: '元' }],
        },
        {
          tag: 'textarea',
          itemAttrs: { label: '备注' },
          attrs: { key: 'remark', value: '', placeholder: '请输入备注', autosize: { minRows: 3 } },
        },

        {
          tag: 'upload',
          itemAttrs: {
            label: '还款附件',

            // rules: [{ required: true, message: '请上传追偿附件', trigger: 'change' }],
          },
          attrs: {
            class: 'form-control-ml',
            key: 'attachment',
            fileName: 0,
            value: '',
            placeholder: '追偿附件',
            accept: '',
            listType: '',
            dir: `/credit/unload/${this.queryId}`,
          },
        },
      ],
      tableName: 'repay_register',
    }
  },
  computed: {
    ...mapGetters(['user']),
  },
  watch: {
    formData: {
      handler: function () {
        this.$refs.form?.setAttrs('attachment', { dir: `/credit/repay/${this.queryId}` })
        this.$refs.form?.setAttrs('datum_repay_list_id', { queryId: this.queryId })
        this.funds = this.formData.repay_funds
      },
      deep: true,
      immediate: true,
    },
    visible(val) {
      this.innerVisible = val
    },
  },
  created() {},
  mounted() {},
  methods: {
    handleBeforeSave(model) {
      model.customer_related_id = this.queryId
      model.submit_person_name = this.user.realName
      return model
    },
    handleDismiss() {
      this.innerVisible = false
      this.$emit('update:visible', false)
    },
    handleSuccess() {
      this.$emit('success', false)
      this.handleDismiss()
    },
  },
}
</script>
<style lang="scss" scoped></style>
